<template>
    <div>
        <!-- 购物车 -->
        <ul class="top">
            <li>30天无忧退货</li>
            <li>48小时快速退款</li>
            <li>满88元免邮费</li>
            <div style="clear:both;"></div>
        </ul>

        <!-- <van-card v-for="item in list" :key="item.goods_id" class="goodsCard"
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
        >
        <template #footer>
            <van-checkbox v-model="item.isChecked"></van-checkbox>
        </template>

        </van-card> -->

        <van-swipe-cell>
            <van-card  v-for="item in list" :key="item.goods_id"
                :num="item.number"
                :price="item.retail_price"
                :title="item.goods_name"
                class="goods-card"
                :thumb="item.list_pic_url"
            />
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>









        <tabbar></tabbar>
        
    </div>
</template>

<script>
import tabbar from "@/components/tabbar.vue"
import {cartList} from "@/api/cart"
export default {
    data() {
        return {
            user:"",
            list:[],
            checked:false,
        };
    },
    components:{
        tabbar,
    },
    computed: {

    },
    created() {
        this.getCartData();
    },
    mounted() {

    },
    methods: {
        //获取购物车列表数据
        getCartData(){
            this.user=localStorage.getItem("openId")
            cartList({
                openId:this.user
            }).then(res=>{
                console.log(res);
                this.list=res.data;
                this.list.forEach(e=>{
                    e.isChecked=false
                })
            })
        }
    },
};
</script>

<style lang="scss">
    body{
        background-color: #F4F4F4;
    }
</style>
<style scoped lang="scss">
    .top{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .top li{
        float: left;
        display: flex;
        align-items: center;
        padding: 15px 10px;
        
    }
</style>
